<template>
    <div class="order-box">
        <van-nav-bar 
        left-arrow
        title="我的订单"
        @click="toMine"/>
        <van-tabs swipeable>
            <van-tab title="未收货">
                <new class="item"></new>
            </van-tab>
            <van-tab title="已完成" >
                <finish></finish>
            </van-tab>
            <van-tab title="已取消" >
                <cancel></cancel>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import New from './new.vue'
import cancel from './cancel.vue'
import finish from './finish.vue'
const router = useRouter();
function toMine(){
    router.push('/mine')
}
</script>

<style lang="less" scoped>
@import url('../../style/comon.less');
.order-box{
    display: block;
    position: relative;
    height: 100%;
    &::v-deep .van-nav-bar__content{
        height: 40px;
        position: sticky;
        top: 0;
    }
    &::v-deep .van-icon{
        color: @g7;
        font-size: 1rem;
    }
}
::v-deep .van-tabs__line{
    background-color: #8fec38;
}
</style>